<template>
  <el-select
    v-model="input"
    class="defaultStyle"
    :placeholder="placeholder"
    :style="cssstyle"
    :disabled="disabled "
    :filterable="filterable"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
export default {
  name: "Select",
  props: {
    value: {
      type: [String, Number, Boolean],
      default: ""
    },
    cssstyle: {
      type: Object,
      default() {
        return {};
      }
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    },
    field: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择"
    }
  },
  data() {
    return {
      vall: ""
    };
  },
  computed: {
    input: {
      get() {
        return this.vall;
      },
      set(val) {
        this.vall = val;
        this.$emit("click", { val: this.vall, field: this.field });
      }
    }
  },
  watch: {},
  mounted() {
    this.vall = this.value;
    let res;
    if (this.value) {
      res = this.options.filter(item => item.value === this.vall);
      this.$emit("click", { val: res[0].value, field: this.field });
    }
  }
};
</script>
<style lang='scss' scoped>
.defaultStyle {
  width: 150px;
}
</style>
